<template>
	<view class="bj">
		<view class="usertxt">
			<image src="/static/uni.png"></image>
			<view>Hi Lily</view>
		</view>
		<view class="weather-page">
			<view class="left-section">
				<view class="current-weather">
					<view class="temp-box">
						<text class="fh" @click="fh">返回</text>
						<text class="temp-value">23°</text>
						<text class="weather-status">多云</text>
					</view>
					<image class="weather-icon" src="/static/Weather/tq_qt.png" mode="aspectFit"></image>
					<view class="location-box">
						<text class="city">成都 高新区</text>
						<text class="temp-range">27°C / 15°C</text>
					</view>

				</view>

				<!-- 未来三天预报 -->
				<!-- 				<view class="forecast-list">
					<view class="forecast-item" v-for="(item, index) in forecastData" :key="index">
						<text class="weekday">{{ item.weekday }}</text>
						<image class="forecast-icon" :src="item.icon" mode="aspectFit"></image>
						<text class="forecast-temp">{{ item.temp }}</text>
					</view>
				</view> -->
				<swiper class="forecast-list" :disable-touch="false" display-multiple-items="3">
					<swiper-item v-for="(item, index) in forecastData" :key="index">
						<view class="forecast-item">
							<text class="weekday">{{ item.weekday }}</text>
							<image class="forecast-icon" :src="item.icon" mode="aspectFit"></image>
							<text class="forecast-temp">{{ item.temp }}</text>
						</view>
					</swiper-item>
				</swiper>
				<!-- 天气指标卡片 -->
				<view class="metric-cards">
					<view class="metric-card">
						<image class="metric-icon" src="/static/icons/humidity.png" mode="aspectFit"></image>
						<text class="metric-label">湿度</text>
						<text class="metric-value">65 %</text>
					</view>
					<view class="metric-card2">
						<image class="metric-icon" src="/static/icons/visibility.png" mode="aspectFit"></image>
						<text class="metric-label">可见度</text>
						<text class="metric-value">1.8 KM</text>
					</view>
					<view class="metric-card3">
						<image class="metric-icon" src="/static/icons/wind.png" mode="aspectFit"></image>
						<text class="metric-label">风速</text>
						<text class="metric-value">5 km/h</text>
					</view>
				</view>
			</view>

			<!-- 右侧区域：搜索栏 + 城市天气列表 -->
			<view class="right-section">
				<!-- 搜索栏 -->
				<view class="search-bar">
					<image class="search-icon" src="/static/icons/search.png" mode="aspectFit"></image>
					<input class="search-input" placeholder="搜索目标城市天气" />
					<image class="voice-icon" src="/static/icons/voice.png" mode="aspectFit"></image>
				</view>

				<!-- 城市天气列表 -->
				<view class="city-weather-list">
					<view class="city-weather-item" v-for="(item, index) in cityWeatherData" :key="index">
						<text class="city-name">{{ item.city }}</text>
						<text class="city-temp">{{ item.temp }}</text>
						<image class="city-icon" :src="item.icon" mode="aspectFit"></image>
						<text class="city-percent">{{ item.percent }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 未来三天预报数据
				forecastData: [{
						weekday: '星期一',
						icon: '/static/Weather/tq_qt.png',
						temp: '15°C / 27°C'
					},
					{
						weekday: '星期二',
						icon: '/static/Weather/sum.png',
						temp: '15°C / 27°C'
					},
					{
						weekday: '星期三',
						icon: '/static/Weather/tq_qt.png',
						temp: '15°C / 27°C'
					},
					{
						weekday: '星期四',
						icon: '/static/Weather/sum.png',
						temp: '15°C / 27°C'
					},
					{
						weekday: '星期五',
						icon: '/static/Weather/tq_qt.png',
						temp: '15°C / 27°C'
					},
					{
						weekday: '星期六',
						icon: '/static/Weather/sum.png',
						temp: '15°C / 27°C'
					},
					{
						weekday: '星期天',
						icon: '/static/Weather/tq_qt.png',
						temp: '15°C / 27°C'
					}
				],
				// 城市天气列表数据
				cityWeatherData: [{
						city: '成都',
						temp: '13°C / 19°C',
						icon: '/static/Weather/sum.png',
						percent: '70%'
					},
					{
						city: '杭州',
						temp: '4°C / 19°C',
						icon: '/static/Weather/tq_qt.png',
						percent: '50%'
					},
					{
						city: '上海',
						temp: '17°C / 19°C',
						icon: '/static/Weather/sum.png',
						percent: '50%'
					},
					{
						city: '广州',
						temp: '11°C / 19°C',
						icon: '/static/Weather/tq_qt.png',
						percent: '50%'
					},
					{
						city: '深圳',
						temp: '8°C / 19°C',
						icon: '/static/Weather/sum.png',
						percent: '20%'
					},
					{
						city: '北京',
						temp: '8°C / 19°C',
						icon: '/static/Weather/tq_qt.png',
						percent: '10%'
					}
				]
			};
		},
		methods: {
			fh() {
				uni.navigateBack()
			}
		}

	};
</script>

<style lang="scss">
	.bj {
		width: 100%;
		height: 100vh;
		background-image: url('/static/home/BG.png');
	}

	.usertxt {
		display: flex;
		align-items: center;
		padding: 50rpx;

		image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 60rpx;
		}

		view {
			margin: 20rpx;
			font-size: 50rpx;
			color: white;
		}

	}

	.weather-page {
		display: flex;

	}

	/* 左侧区域样式 */
	.left-section {
		flex: 3;
		display: flex;
		flex-direction: column;
		padding: 30rpx;
		gap: 30rpx;
	}

	/* 当前天气模块 */
	.current-weather {
		display: flex;
		align-items: center;
		gap: 40rpx;

	}

	.temp-box {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.fh {
		width: 120rpx;
		height: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: rgba(255, 255, 255, 0.3);
		margin: 20rpx;
		border-radius: 100%;
		font-size: 30rpx;
		color: white;
		font-weight: 800;
		margin-right: 200rpx;
	}


	.temp-value {
		font-size: 180rpx;
		font-weight: bold;
	}

	.weather-status {
		font-size: 32rpx;
		margin-top: 10rpx;
	}

	.location-box {
		display: flex;
		flex-direction: column;
	}

	.city {
		font-size: 40rpx;
		font-weight: 500;
	}

	.temp-range {
		font-size: 32rpx;
		margin-top: 10rpx;
	}

	.weather-icon {
		width: 200rpx;
		height: 200rpx;
		margin: 10rpx;
	}

	/* 未来三天预报 */
	.forecast-list {
		display: flex;
		margin-top: 20rpx;
		height: 400rpx;
	}

	.forecast-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: rgba(255, 255, 255, 0.3);
		padding: 80rpx;
		width: 200rpx;
		border-radius: 50rpx;

	}

	.weekday {
		font-size: 48rpx;
		margin-bottom: 15rpx;
	}

	.forecast-icon {
		width: 100rpx;
		height: 100rpx;
		margin-bottom: 15rpx;
		margin: 20rpx;
	}

	.forecast-temp {
		font-size: 28rpx;
	}

	/* 天气指标卡片 */
	.metric-cards {
		display: flex;
		flex-wrap: wrap;
	}

	.metric-card {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 45%;
		height: 350rpx;
		background-image: url('/static/Weather/wd.png');
		background-size: cover;
		box-sizing: border-box;
	}

	.metric-card2 {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 45%;
		height: 350rpx;
		background-image: url('/static/Weather/khd.png');
		background-size: cover;
		box-sizing: border-box;
	}

	.metric-card3 {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 45%;
		height: 350rpx;
		background-image: url('/static/Weather/fs.png');
		background-size: cover;
		box-sizing: border-box;
	}

	.metric-icon {
		width: 60rpx;
		height: 60rpx;
		margin-bottom: 10rpx;
	}

	.metric-label {
		font-size: 60rpx;
		margin-bottom: 5rpx;
	}

	.metric-value {
		font-size: 40rpx;
		color: #b3b3b3;
	}

	/* 右侧区域样式 */
	.right-section {
		flex: 3;
		display: flex;
		flex-direction: column;
		padding: 30rpx;
		background-color: rgba(255, 255, 255, 0.6);
		border-radius: 50rpx;
		margin-right: 50rpx;
	}

	/* 搜索栏 */
	.search-bar {
		display: flex;
		align-items: center;
		padding: 15rpx 20rpx;
	}

	.search-icon,
	.voice-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.search-input {
		flex: 1;
		height: 120rpx;
		margin: 0 20rpx;
		font-size: 32rpx;
	}

	/* 城市天气列表 */
	.city-weather-list {
		flex: 1;
		overflow-y: auto;
		// background-color: rgba(255, 255, 255, 0.6);
		border-radius: 0rpx 0rpx 50rpx 50rpx;
	}

	.city-weather-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 50rpx 80rpx;
		border-bottom: 5rpx #eee solid;
	}

	.city-name {
		font-size: 60rpx;
	}

	.city-temp {
		font-size: 32rpx;
	}

	.city-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.city-percent {
		font-size: 28rpx;
	}
</style>